<template>
  <div class="problem-list">
    <!-- 搜索和筛选区域 -->
    <div class="search-area">
      <el-form :inline="true" :model="searchForm">
        <el-form-item>
          <el-autocomplete
            v-model="searchForm.title"
            :fetch-suggestions="querySearchAsync"
            placeholder="搜索题目"
            clearable
            :trigger-on-focus="false"
            @select="handleSelect"
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon class="search-icon"><Search /></el-icon>
            </template>
            <!-- 添加自定义建议项模板 -->
            <template #default="{ item }">
              <div v-html="item.value" class="suggestion-item"></div>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.hardLevel" placeholder="难度" clearable>
            <el-option label="简单" value="简单" />
            <el-option label="中等" value="中等" />
            <el-option label="困难" value="困难" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchForm.tag"
            placeholder="标签"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 题目列表 -->
    <el-table
      v-loading="loading"
      :data="problemList"
      border
      style="width: 100%"
    >
      <el-table-column prop="id" label="题号" width="80" />
      <el-table-column prop="title" label="题目" min-width="200">
        <template #default="{ row }">
          <router-link :to="`/problem/${row.id}`" class="problem-link">
            <span v-html="row.title"></span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="hardLevel" label="难度" width="100">
        <template #default="{ row }">
          <el-tag :type="getDifficultyType(row.hardLevel)">
            {{ row.hardLevel }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="problemTags" label="标签" width="200">
        <template #default="{ row }">
          <el-tag
            v-for="tag in row.problemTags?.split(',')"
            :key="tag"
            class="tag-item"
            size="small"
          >
            {{ tag }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getProblems, getProblemSuggestions, searchProblems } from '../../api/problem'
import { debounce } from 'lodash-es'


const loading = ref(false)
const problemList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const searchForm = reactive({
  title: '',
  hardLevel: '',
  tag: ''
})

const getDifficultyType = (difficulty) => {
  const types = {
    '简单': 'success',
    '中等': 'warning',
    '困难': 'danger'
  }
  return types[difficulty] || 'info'
}

const fetchProblems = async () => {
  loading.value = true
  try {
    // 使用新的搜索接口
    const searchRes = await searchProblems({
      current: currentPage.value,
      pageSize: pageSize.value,
      searchText: searchForm.title,
      hardLevel: searchForm.hardLevel,
      tag: searchForm.tag
    })
    
    // 如果搜索接口返回结果为空，则使用原有接口
    if (!searchRes.data.records.length) {
      const res = await getProblems({
        current: currentPage.value,
        pageSize: pageSize.value,
        ...searchForm
      })
      problemList.value = res.data.records
      total.value = res.data.total
    } else {
      problemList.value = searchRes.data.records
      total.value = searchRes.data.total
    }
  } catch (error) {
    console.error('获取题目列表失败:', error)
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  currentPage.value = 1
  fetchProblems()
}

const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
  handleSearch()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  fetchProblems()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchProblems()
}

onMounted(() => {
  fetchProblems()
})

// 搜索建议处理函数
const querySearchAsync = debounce(async (queryString, cb) => {
  if (!queryString) {
    cb([])
    return
  }
  
  try {
    const res = await getProblemSuggestions(queryString)
    const suggestions = res.data.map(item => ({
      value: item
    }))
    cb(suggestions)
  } catch (error) {
    console.error('获取搜索建议失败:', error)
    cb([])
  }
}, 500)

// 选择建议项处理函数
const handleSelect = (item) => {
  searchForm.title = item.value
  handleSearch()
}
</script>

<style scoped>
.problem-list {
  padding: 20px;
}

.search-area {
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-area :deep(.el-form-item) {
  margin-bottom: 18px;
  margin-right: 18px;
}

.search-area :deep(.el-input),
.search-area :deep(.el-select) {
  width: 200px;
}

.problem-link {
  color: #409EFF;
  text-decoration: none;
}

.problem-link:hover {
  color: #66b1ff;
}

.tag-item {
  margin-right: 5px;
  margin-bottom: 5px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

:deep(.el-table) {
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-icon {
  font-size: 16px;
  color: #909399;
}

:deep(.suggestion-item em) {
  color: #f56c6c;
  font-style: normal;
}

:deep(.el-autocomplete-suggestion__list) {
  padding: 8px 0;
}

.problem-link :deep(em) {
  color: #f56c6c;
  font-style: normal;
  font-weight: bold;
}
</style>